<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 300vh;
            background: rgb(200, 200, 200);
        }
        .list{
            width: 100%;
            height: 5vh;
            /* background: red; */
            position: sticky;
            top: 0vh;
            
        }
        .page2{
            height: 600vh;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            width: 96vw;
            position: relative;
            background: #C0BEB5;
            /* bottom: -400px; */
            padding-bottom: 400px;
        }
        .page1,.page3{
            height: 300vh;
            background: rgba(255, 255, 255, 0.2);
        }
    </style>

    <style>
        

    .picture_wall {
        display: flex;
        /* 横着排列 */
        flex-direction: row;
        overflow-x: scroll;
        white-space: nowrap;
        color: white;
    }

    .picture_wall::-webkit-scrollbar {
        display: none;
    }

    .picture_wall_item {
        font-size: 10px;
        padding: 6px 3px;
        /* width: 400px; */
        height: 550px;
        /* width: 68px; */
        border-radius: 15px 15px 15px 15px;
        background-color: rgb(230, 220, 220);
        margin: 10px;
        /* display: inline; */
        position: relative;
        background: rgb(80, 80, 80);
        /*  */
    }
    img{
        /* position: relative; */
        width: 900px;
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="page1">

    </div>
    <div class="page2">
        
        <div class="list">
            <div class="picture_wall">
                <div class="picture_wall_item "><img  src="../../three/skyboxsun25deg/test.jpg" alt="" srcset=""></div>
                <div class="picture_wall_item "><img  src="../../three/skyboxsun25deg/test3.jpg" alt="" srcset=""></div>
                <div class="picture_wall_item "><img src="../../three/skyboxsun25deg/test5.jpg"  alt="" srcset=""></div>
                <div class="picture_wall_item "><img crossorigin="anonymous" src="../../three/skyboxsun25deg/test6.jpg" alt="" srcset=""></div>
                <div class="picture_wall_item "><img crossorigin="anonymous" src="https://inews.gtimg.com/newsapp_bt/0/14144900034/1000" alt="" srcset=""></div>
                <div class="picture_wall_item "><img crossorigin="anonymous" src="https://inews.gtimg.com/newsapp_bt/0/14144900034/1000" alt="" srcset=""></div>
                
            </div>


        </div>
    </div>
    
    <div class="page3">

    </div>

    <script>
       
        let element = document.querySelector(".picture_wall")
         // 给一个最外层的容器
        let parentElement = document.querySelector(".page2")
        let elementDistance = parentElement.offsetTop
        window.addEventListener("scroll",()=>{
            // 这里是用户滑动的距离
            let scrollDistance = document.documentElement.clientHeight+document.documentElement.scrollTop
            // 如果滑动刚过视图范围。到底部就不进行计算
            // 这里可以做一个区分，就是假如我们做动效，那么我们后面跟着的就不是offsetHeight而是window.innerHeight
            if(scrollDistance>elementDistance && scrollDistance<elementDistance+parentElement.offsetHeight ){
                radio = (scrollDistance-elementDistance)/parentElement.offsetHeight
                // console.log(radio)
                console.log(radio)
                document.querySelector(".picture_wall").scrollLeft =radio * (document.querySelector(".picture_wall").offsetWidth)
                // element.currentTime = radio * allTime
            }
           
        })
       
    </script>
</body>
</html>